<script setup lang="ts">
import { ref } from 'vue';
import { storeToRefs } from 'pinia'

// 使用 pinia 仓库
import { useCounterStore } from './store/counter'

// 组件
import ChannelNav from './components/ChannelNav.vue';
import ArticleList from './components/ArticleList.vue';
import './index.css';

// 频道id ts 默认推导
// const channelId = ref(1);
// 创建 store 实例
// const counterStore = useCounterStore()
// 直接解构会丢失响应式
const counterStore = useCounterStore()
// 调用 storeToRefs 这个方法恢复响应式
const { count, doubleCount } = storeToRefs(counterStore)


// 频道改变事件处理函数
// const changeChannelHandler = (id: number) => {
//   console.log(id);
//   channelId.value = id;
// };
</script>

<template>
  <!-- <h1 @click="counterStore.update()">{{ counterStore.count }}</h1> -->
  <!-- <h1 @click="counterStore.asyncUpdate()">{{ counterStore.doubleCount }}</h1> -->
  <h1 @click="counterStore.update()">{{ count }}</h1>
  <h1 @click="counterStore.asyncUpdate()">{{ doubleCount }}</h1>
  <!-- 顶部频道导航 -->
  <!-- <ChannelNav :channelId="channelId" @changeChannel="changeChannelHandler" /> -->
  <ChannelNav />
  <!-- 文章列表 -->
  <!-- <ArticleList :channelId="channelId" /> -->
  <ArticleList />
</template>

<style scoped></style>
